import styled from '@emotion/styled'
import { Menu } from 'antd'
import React,{Fragment} from 'react'
import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
import { EpicScreen } from 'screens/Epic'

import Kanban from 'screens/Kanban'

const useRouteType = () => {
  const units = useLocation().pathname.split('/')
  return units[units.length -1]
}


export default function ProjectScreen() {
  const routeType = useRouteType()
  return (
    <Container>
      <Aside>
        <Menu mode='inline' selectedKeys={[routeType]}>
          <Menu.Item key={'kanban'}>
            <Link to={'kanban'}>看板</Link> 
          </Menu.Item>
          <Menu.Item key={'epic'}>
            <Link to={'epic'}>任务组</Link>
          </Menu.Item>
        </Menu>
      </Aside>
      <Main>
        <Routes>
          <Route path='/kanban' element={<Kanban></Kanban>}></Route>
          <Route path='/epic' element={<EpicScreen></EpicScreen>}></Route>
          <Route path='/' element={<Navigate to={window.location.pathname+'/kanban'} replace></Navigate>}></Route>
        </Routes>
      </Main>
    </Container>
  )
}

const Aside = styled.aside`
  background-color: rgb(244,245,247);
  display: flex;
`

const Main = styled.div`
  box-shadow: -5px 0 5px -5px rgba(0,0,0,0.1);
  display: flex;
  overflow: hidden;
`

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
  overflow: hidden;
  width: 100%;
`